<template>
  <a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
    <a-layout>
      <a-layout-header :style="headerStyle">
        <div class="myHeader">
          <div class="headerLeft">
            <a-descriptions title="" bordered :column="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 2 }" size="small"
                            style="width: 35vw">
              <a-descriptions-item label="习惯标题">{{ habit.title }}</a-descriptions-item>
              <a-descriptions-item label="创建->结束">{{ habit.createTime }}<br/>{{ habit.endTime }}
              </a-descriptions-item>
              <a-descriptions-item label="已打卡">{{ finishRecord }}</a-descriptions-item>
              <a-descriptions-item label="未打卡">{{ failRecord }}</a-descriptions-item>
              <a-descriptions-item label="剩余打卡">{{ surplusRecord }}</a-descriptions-item>
              <a-descriptions-item label="总需打卡">{{ totalRecord }}</a-descriptions-item>
              <a-descriptions-item label="习惯描述">
                {{ habit.habitProfile }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="headerRight">
            <div ref="chart" style="width:65vw ;height: 25vh"></div>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content :style="contentStyle">
        <a-table :columns="columns" :data-source="data" bordered size="small" table-layout="fixed"
                 :pagination="paginationConfig">
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
          <template #title>习惯打卡表</template>
          <template #footer>
            <a-button type="primary"  @click="showModel">点击打卡</a-button>
          </template>
        </a-table>
      </a-layout-content>
      <a-layout-footer :style="footerStyle">
        <calendar-heatmap :values="calendarData" :round="5" tooltip-unit="record" :end-date="endDate"
                          style="width: 45vw;height: 20vh;margin:0 auto"/>
      </a-layout-footer>
    </a-layout>
  </a-space>
  <a-modal v-model:open="open" title="CREATE HABIT" @ok="handleOk" :confirm-loading="confirmLoading">
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="本次打卡小结">
        <a-textarea v-model:value="profile" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-float-button
      tooltip="返回"
      type="primary"
      :style="{
      left: '8vw',
      bottom:'13vh',
    }"
      @click="toHabit"
  >
    <template #icon>
      <DoubleLeftOutlined />
    </template>
  </a-float-button>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {getStartDateOfNextYear} from "../constant/DateUtils.js";
import myAxios from "../axios.js";
import {useRoute, useRouter} from "vue-router";
import {message} from "ant-design-vue";
import * as echarts from 'echarts';
import {DoubleLeftOutlined} from '@ant-design/icons-vue';
const router = useRouter();
const toHabit = () => {
  router.push({
    path: '/',
    query: {
      tab: '2'
    }
  })
}
const open = ref(false);
const paginationConfig = {
  pageSize: 7,  // 每页显示的行数
  showTotal: (total) => `总共 ${total} 条`,  // 自定义总条数显示文本
  // 其他分页配置...
}
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const profile = ref('躺平，不想写');
const confirmLoading =ref(false);
const showModel = () => {
  open.value = true;
}
const handleOk = () => {
  let status = false;
  let msg = '';
  myAxios.get('/habit/clockIn?habitId='+habitId.value+'&profile='+profile.value).then(
      res => {
        if(res.code === 0){
          status = true;
          msg = '打卡成功';
        }
        else{
          msg = res.message;
        }
      }
  ).catch(error => {
    console.log("打卡出现错误",error);
  })
  confirmLoading.value = true;
  setTimeout(()=>{
    if(status){
      flushData();
      open.value = false;
      profile.value = '躺平，不想写';
      message.success('添加成功')
      isClockIn.value  = true
    }else{
      confirmLoading.value = false;
      message.error(msg);
    }
  },2000)
}
const calendarData = ref([]);
const endDate = getStartDateOfNextYear();
const habit = ref({});
const finishRecord = ref(0);
const failRecord = ref(0);
const surplusRecord = ref(0);
const totalRecord = ref(0);
const columns = [
  {
    title: '打卡简述',
    dataIndex: 'habitProfile',
  },
  {
    title: '打卡时间',
    dataIndex: 'createTime',
  }
];

const data = ref([]);
const headerStyle = {
  height: '25vh',
  background: 'none'
};
const contentStyle = {
  height: '50vh',
};
const footerStyle = {
  height: '25vh'
};
const route = useRoute();
const chart = ref(null);
const isClockIn = ref(false);
const habitId = ref(route.query.id);
const flushData = () => {
  const myChart = echarts.init(chart.value);
  myAxios.get('/habit/detail?id=' + habitId.value).then(
      res => {
        if (res.code === 0) {
          habit.value = res.data.targetHabit;
          finishRecord.value = res.data.finishRecord;
          failRecord.value = res.data.failRecord;
          surplusRecord.value = res.data.surplusRecord;
          totalRecord.value = res.data.totalRecord;
          calendarData.value = res.data.calendarDataList;
          data.value = res.data.habitrecords
          const options = ref({
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '打卡情况分布图',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: [
                  {value: finishRecord.value, name: '已完成打卡'},
                  {value: failRecord.value, name: '未完成打卡'},
                  {value: surplusRecord.value, name: '剩余打卡数'},
                  {value: totalRecord.value, name: '总需打卡数'},
                ]
              }
            ]
          });
          myChart.setOption(options.value);
        } else {
          message.error("获取详情信息失败");
        }
      }
  ).catch(
      error => {
        console.log("获取详情信息error: ", error);
      }
  )
}
onMounted(() => {
  flushData();
})
</script>

<style scoped>
th.column-money,
td.column-money {
  text-align: right !important;
}

.myHeader {
  width: 100vw;
  height: 25vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.myHeader .headerRight {
  width: 65vw;
  height: 25vh;
}
</style>